Secure Registration System with PHP and MySQL |
您所在的位置：网站首页 › how to design a registration form › Secure Registration System with PHP and MySQL |
Secure Registration System with PHP and MySQL
|
This tutorial is a follow up to our previous tutorial Secure Login System with PHP and MySQL. In this tutorial, we'll be creating a secure registration form and implementing basic validation. A registration form is what your website's visitors can use to register their details, which will subsequently be stored in a MySQL database and be used for authentication purposes. The Advanced package includes additional features and a download link to the source code. In addition, it includes the complete tutorial source code. Contents Getting Started Requirements What You Will Learn in this Tutorial File Structure & Setup Creating the Registration Form Design Creating the Database and setting-up Tables Registering Users with PHP & MySQL Validating Form Data Implementing Account Activation 1. Getting StartedThere are a few steps we need to take before we create our secure registration system. We need to set up our web server environment and make sure we have the required extensions enabled (skip if you followed the secure login system tutorial). 1.1. Requirements If you haven't got a local web server set-up, you will need to download and install XAMPP. XAMPP is a server-side web development environment that includes the essentials for back-end web developers. 1.2. What You Will Learn in this Tutorial Form Design — Design a registration form with HTML5 and CSS3. Prepared SQL Queries — How to prepare SQL queries to prevent SQL injection and insert new records into a MySQL database. Basic Validation — Validating form data that is sent to the server (username, password, and email). 1.3. File Structure & SetupWe now need to start our web server and create the files and directories that we're going to use for our registration system. Open XAMPP Control Panel Next to the Apache module click Start Next to the MySQL module click Start Navigate to XAMPPs installation folder (C:\xampp) Open the htdocs folder Create the following folders and files: File Structure\-- phplogin |-- register.html |-- style.css |-- register.php |-- activate.php (optional) Each file will contain the following: register.html — Registration form created with HTML5 and CSS3. As this file doesn't require us to use PHP, we'll save it as plain HTML. style.css — The stylesheet (CSS3) for our secure registration form. register.php — Validate form data and insert a new account into the MySQL database. activate.php — Activate the user's account with a unique code (email-based activation). 2. Creating the Registration Form DesignThe registration form will be used by our website's visitors. They can use it to input their account information seamlessly. We'll be creating the registration form with HTML and CSS. Edit the register.html file and add the following code: HTML Copy Register RegisterIf we navigate to http://localhost/phplogin/register.html, our registration form will look like the following: http://localhost/phplogin/register.html
Pretty basic for a registration form, right? Now let's spice it up a little and implement some CSS code. Edit the style.css file, and add the following: CSS Copy * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif; font-size: 16px; } body { background-color: #435165; margin: 0; } .register { width: 400px; background-color: #ffffff; box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3); margin: 100px auto; } .register h1 { text-align: center; color: #5b6574; font-size: 24px; padding: 20px 0 20px 0; border-bottom: 1px solid #dee0e4; } .register form { display: flex; flex-wrap: wrap; justify-content: center; padding-top: 20px; } .register form label { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background-color: #3274d6; color: #ffffff; } .register form input[type="password"], .register form input[type="text"], .register form input[type="email"] { width: 310px; height: 50px; border: 1px solid #dee0e4; margin-bottom: 20px; padding: 0 15px; } .register form input[type="submit"] { width: 100%; padding: 15px; margin-top: 20px; background-color: #3274d6; border: 0; cursor: pointer; font-weight: bold; color: #ffffff; transition: background-color 0.2s; } .register form input[type="submit"]:hover { background-color: #2868c7; transition: background-color 0.2s; }We need to include our stylesheet in our register.html file, copy and paste the following code to the head section: HTML CopyAnd now our registration form will look more appealing: http://localhost/phplogin/register.html
Let's narrow down the form so we can get a better understanding of what's going on. Form — we need to use both the action and post attributes, the action attribute will be set to the registration file. When the form is submitted, the form data will be sent to the registration file for processing. The method attribute is set to post, which will enable us to process the form data using the POST request method. Input (text/password/email) — We need to name our form fields so the server can recognize them, so if we set the value of the attribute name to the username, we can use the post variable in our registration file to get the data, like this: $_POST['username']. Input (submit) — On click, the form data will be sent to our registration file for processing.That's basically all we need to do on the client side. The next step is to set up the database and create the registration file with PHP. 3. Creating the Database and setting-up TablesYou can skip this step if you followed the Secure Login System Tutorial. For this part, you will need to access your MySQL database, either using phpMyAdmin or your preferred MySQL database management application. If you're using phpMyAdmin then follow these instructions: Navigate to: http://localhost/phpmyadmin/ Click the Databases tab at the top Under Create database, type in phplogin in the text box Select utf8_general_ci as the collation Click CreateYou can use your own database name, but for this tutorial, we'll use phplogin. What we need now is an accounts table that will store all our accounts (usernames, passwords, emails, etc.). Click the database on the left side panel (phplogin) and execute the following SQL statement: SQL Copy CREATE TABLE IF NOT EXISTS `accounts` ( `id` int(11) NOT NULL AUTO_INCREMENT, `username` varchar(50) NOT NULL, `password` varchar(255) NOT NULL, `email` varchar(100) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;On phpMyAdmin this should look like: http://localhost/phpmyadmin/
The above SQL statement code will create the accounts table with the columns id, username, password, and email. 4. Registering Users with PHP & MySQLNow we need to create the registration file that will process the form fields, check for basic validation, and insert the new account into our database. The registration page will require a connection to our database, and therefore we must include the necessary variables and MySQL functions. Edit the register.php file and add the following code: PHP Copy |
【本文地址】
今日新闻 |
推荐新闻 |